<template>
  <div class="home-container">
    <!-- 星空背景代码 -->
    <star-canvas></star-canvas>

    <!-- 学术星河 Logo 和文字 -->
    <div class="logo-container">
      <img src="../../assets/logo.png" alt="Logo" class="logo-img">
      <h1 class="platform-name">学 术 星 河</h1>
    </div>

    <!-- 搜索框和搜索图标容器 -->
    <div class="search-container">
      <!-- 搜索框和搜索图标水平布局 -->
      <div class="search-box-container">
        <!-- 下拉框 -->
        <el-select v-model="selectedOption" placeholder="Select" class="custom-select">
          <el-option label="文献" value="paper" style="color: var(--main-color);"></el-option>
          <el-option label="科研学者" value="scholar" style="color: var(--main-color);"></el-option>
          <el-option label="期刊" value="venue" style="color: var(--main-color);"></el-option>
        </el-select>

        <!-- 搜索框 -->
        <!-- <el-input
          v-model="searchInput"
          class="search-box"
          :placeholder="dynamicPlaceholder"
          clearable="true"
        ></el-input> -->

        <el-autocomplete
          v-model="searchInput"
          class="search-box"
          :fetch-suggestions="querySearchAsync"
          :placeholder="dynamicPlaceholder"
          clearable
        ></el-autocomplete>


        <!-- 搜索图标 -->
        <el-button @click="search" type="primary" :icon="Search" color="var(--main-color)" class="search-button">
          <el-icon size="20" class="search-icon">
            <Search />
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { req_searchSuggestions } from '@/api/index.js'
import StarCanvas from "@/views/home-view/StarCanvas.vue";

export default {
  name: 'HomeView',
  components: {StarCanvas},
  data() {
    return {
      searchInput: '', // 绑定搜索框输入
      selectedOption: 'paper', // 绑定下拉框选项
    };
  },
  computed: {
    dynamicPlaceholder() {
      // 根据选中的选项动态生成 placeholder
      return `Search ${this.selectedOption}...`;
    },
  },
  mounted() {

  },
  methods: {

   // 获取搜索建议
    querySearchAsync(queryString, cb) {
        const type = this.selectedOption; // 使用下拉框选项作为搜索类型
        req_searchSuggestions(type, queryString)
            .then(response => {
                const errno = response.data.errno;
                const msg = response.data.msg;
                const suggestions = response.data.suggestions;

                if (errno === 1) {
                    cb(suggestions);

                    // 跳转
                    this.$router.push({
                        path: '/'
                    })
                } else if (errno === 1001 || errno === 1002) {
                    ElMessage.info(msg);
                }
            })
            .catch(error => {
                console.error('Error fetching search suggestions:', error);
            });
    },

    // 点击搜索按钮时触发的方法
    search() {
      this.navigateToSearchResults();
    },

    // 回车键按下时触发的方法
    handleEnterKey() {
      this.navigateToSearchResults();
    },

    // 导航到搜索结果页面
    navigateToSearchResults() {
      const type = this.selectedOption;
      const keyword = this.searchInput;
      this.$router.push({
        path: '/search',
        query: { type, keyword },
      });
    },
  },
};
</script>

<style scoped>

.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 80px;
}

.platform-name {
  color: var(--text-color);
  margin: 0;
  margin-left: 10px;
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

/* 水平布局搜索框和搜索图标 */
.search-box-container {
  display: flex;
  align-items: center;
}

.custom-select {
  width: 100px; /* 调整下拉框的宽度 */
  margin-right: 10px; /* 调整搜索框和图标之间的间距 */
}

.search-box {
  width: 200px;
}

.search-icon {
  color: var(--text-color);
}

.search-button {
  margin-left: 10px; /* 调整搜索图标和搜索框之间的间距 */
}
</style>
